<template>
  <view class="answer">
    <view class="navs flex align-start justify-between" v-if="title">
      <view class="nav-titles flex align-start">
        <image src="/static/chapter/chapter.png" mode=""></image>
        <text class="nav-title">
          {{ title }}
        </text>
      </view>
      <view class="nums">
        <text>{{ currentPage + 1 }}/{{ count }}</text>
      </view>
    </view>
    <view class="navs flex align-center " v-else>
      <image src="/static/chapter/chapter.png" mode=""></image>
      <view class="nums" style="display: flex; align-items: center;justify-content: space-between;">
        <text>{{ currentPage + 1 }}/{{ count }}</text>
        <view style="display: flex;align-items: center;">
          <view style="font-size: 30rpx;font-weight: bold;color: #333333;">剩余时间：</view>
          <u-count-down @end='end' :timestamp="timer" separator-color='#36c269' color='#36c269' :show-hours='false'
            bg-color='#f5f6f9'></u-count-down>
        </view>
      </view>
    </view>
    <view class="card">
      <scroll-view style="height: 100%;" :scroll-top="scrollTop[index]" class="scroll-Y"
        @scroll="scroll($event, index)">
        <subject :info="thisdet" v-if="thisdet.options != null" @change="handChange" :analysis="false" :examin="true">
          <template #no>
            <text class="nums">{{ currentPage + 1 }}/{{ count }}</text>
          </template>
        </subject>
        <view class="btns">
          <view class="btn" :style="{ height: currentPage === 0 ? '0' : '92rpx' }">
            <button :style="{ height: currentPage === 0 ? '0' : '92rpx' }" class="cu-btn nxt-btn up-btn"
              @click="handUp">
              <text>上一题</text>
            </button>
          </view>
          <view class="btn"
            :style="{ height: currentPage + 1 === count ? '0' : '92rpx', marginTop: currentPage + 1 === count ? 0 : '40rpx' }">
            <button class="cu-btn nxt-btn down-btn" @click="handNext"
              :style="{ height: currentPage + 1 === count ? '0' : '92rpx' }">
              <text>下一题</text>
            </button>
          </view>
          <view class="btn" style="height: 92rpx;">
            <button class="cu-btn nxt-btn submit-btn" @click="showModal" style="height: 92rpx;">
              <text>交卷</text>
            </button>
          </view>
        </view>
      </scroll-view>
      <!-- 				</swiper-item>
			</swiper> -->
    </view>
    <view class="cu-modal" :class="modalName ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">温馨提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl bg-white dia-content">
          确认提交答卷吗?
        </view>
        <view class="dia-bottom bg-white flex align-center justify-between">
          <view class="jt-btn flex align-center justify-center" @tap="hideModal">
            <view>
              取消
            </view>
          </view>
          <view class="jt-btn flex align-center justify-center" @click="handSubmit()">
            <view>
              确定
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal v-model="showpop" content="考试已结束,请交卷" @confirm='handSubmit()' confirm-text='交卷'></u-modal>
  </view>
</template>

<script>
import {
  doMockeExam,
  doStar,
  doSubmit
} from '@/api/examination.js'
import subject from '@/components/subject.vue'
export default {
  components: {
    subject
  },
  data () {
    return {
      timer: 2400,
      allList: [],
      list: [],
      scrollTop: [],
      old: [],
      count: 320,
      current: 1,
      currentPage: 0,
      listcurret: 0,
      mockId: '',
      name: '',
      oldId: '',
      modalName: false,
      thisdet: {},
      showpop: false,
      city: '',
    }
  },
  onLoad (e) {
    this.city = e.name
    this.name = e.name == 0 ? '全国卷' : `${e.name}卷`
    this.id = 1
    this.getList(1)
  },
  methods: {
    //倒计时结束
    end () {
      this.showpop = true
    },
    scroll (e, index) {
      this.old[index].scrollTop = e.detail.scrollTop
    },
    handUp () {
      if (this.currentPage === 0) {
        uni.showToast({
          icon: 'none',
          title: '当前已是第一题'
        })
        return
      }
      this.currentPage = this.currentPage - 1
      this.listcurret = this.listcurret - 1
      if (this.allList[this.listcurret].selectValue == undefined) {
        this.Data_processing(this.allList[this.listcurret])
      } else {
        this.thisdet = this.allList[this.listcurret]
      }
    },
    handNext () {
      if (this.currentPage + 1 === this.allList.length) {
        this.showModal()
        return
      }
      console.log('上一页数据');
      console.log(this.allList[this.listcurret]);
      this.currentPage = this.currentPage + 1
      this.listcurret = this.listcurret + 1
      if (this.allList[this.listcurret].selectValue == undefined) {
        this.Data_processing(this.allList[this.listcurret])
      } else {
        this.thisdet = this.allList[this.listcurret]
      }
    },
    // 选择
    handChange (e, info, jump = true) {
      const that = this
      // const item = this.list[this.current]
      // item.selectValue = e
      // const row = this.allList.find(el => el.id === item.id)
      // row.selectValue = e
      if (this.thisdet.type_ == '3') {
        this.thisdet = info
      }
      //单选判断
      if (this.thisdet.type_ != '3') {
        e = String(e)
        that.thisdet.selectValue = e
        that.thisdet.user_answer = e
        // that.chance_correct = that.chance_correct + 1
        // this.allList[this.listcurret - 1].istrue = 1
        // console.log('111')
      }
      // 多选题
      else {
        // this.thisdet.answer_true = e
        this.thisdet.selectValue = e
        let arr = {}
        arr = e
        arr = arr.join('')
        this.thisdet.user_answer = arr
      }
      // if (this.thisdet.answer_true) {
      // 	if (this.currentPage != this.allList.length) {
      // 		setTimeout(() => {
      // 			if (this.currentPage < this.listcurret) {
      // 				this.currentPage = this.currentPage + 1
      // 				return
      // 			} else
      // 				this.listcurret = this.listcurret + 1
      // 			this.qid = this.allList[this.currentPage - 1].id_
      // 			this.getonequestion()
      // 		}, 600)
      // 	} else {
      // 		uni.showToast({
      // 			title: '已经到最后一题了',
      // 			icon: 'none'
      // 		})
      // 	}
      // }
      this.allList[this.listcurret] = this.thisdet
      this.$forceUpdate()
      if (jump) {
        setTimeout(() => {
          this.handNext()
        }, 400)
      }
    },
    async getList (id) {
      const {
        data
      } = await doMockeExam({
        city: this.city
      })
      this.mockId = data.mock_exam_id
      this.count = data.questions.length
      this.allList = data.questions
      this.Data_processing(this.allList[this.listcurret])
      // this.scrollTop = []
      // this.old = []
      // const all = data.questions.map((el, n) => {
      // 	el.options = JSON.parse(el.question_options).map((item, index) => {
      // 		item.zIndex = item.option_index
      // 		item.result = item.is_right
      // 		item.value = item.option_name
      // 		return item
      // 	})
      // 	el.type = el.question_type
      // 	el.index = n
      // 	el.okInfo = el.options.find(item => item.result)
      // 	el.selectValue = ''
      // 	el.swiperType = 'PAGE'
      // 	return el
      // })
      // all.unshift({
      // 	swiperType: 'STAR'
      // })
      // all.push({
      // 	swiperType: 'END'
      // })
      // this.allList = all
      // this.scrollTop = [0, 0, 0, 0, 0]
      // this.old = [{
      // 	scrollTop: 0
      // }, {
      // 	scrollTop: 0
      // }, {
      // 	scrollTop: 0
      // }, {
      // 	scrollTop: 0
      // }, {
      // 	scrollTop: 0
      // }]
      // this.list = this.allList.filter((el, index) => index <= 4)
      doStar(data.mock_exam_id)
    },
    //数据处理
    Data_processing (data) {
      data.index = this.listcurret + 1
      if (data.type_ == 2 || data.type_ == 3) {
        var options = [{
          options_name: data.an1_,
          zIndex: 'A',
          value: 1
        },
        {
          options_name: data.an2_,
          zIndex: 'B',
          value: 2
        },
        {
          options_name: data.an3_,
          zIndex: 'C',
          value: 3
        },
        {
          options_name: data.an4_,
          zIndex: 'D',
          value: 4
        },
        {
          options_name: data.an5_,
          zIndex: 'E',
          value: 5
        },
        {
          options_name: data.an6_,
          zIndex: 'F',
          value: 6
        },
        {
          options_name: data.an7_,
          zIndex: 'G',
          value: 7
        },
        {
          options_name: data.an8_,
          zIndex: 'H',
          value: 8
        },
        {
          options_name: data.an9_,
          zIndex: 'I',
          value: 9
        },
        {
          options_name: data.an10_,
          zIndex: 'J',
          value: 10
        },
        ]
      }
      if (data.type_ == 1) {
        var options = [{
          options_name: '正确',
          zIndex: 'A',
          value: 1
        },
        {
          options_name: '错误',
          zIndex: 'B',
          value: 2
        },
        ]
      }
      if (data.voice_file) {
        data.voice_file = data.voice_file.replace('http:', 'https:')
      }
      let istrues = this.$u.deepClone(data.answer_true)
      data.options = options
      data.istrue = istrues
      data.result = istrues
      data.selectValue = ''
      if (data.type_ == 3) {
        //data.istrue = Number(data.istrue)
        data.istrue = data.istrue.toString().split('').map(Number).filter(item => item)
      }
      data.isfinish = false
      data.iscorrect = ''
      data.goods_ds = []
      this.thisdet = data
    },
    async handSubmit () {
      this.hideModal()

      const params = {
        mock_exam_id: this.mockId,
        answer: this.$u.deepClone(this.allList)
      }

      const {
        code,
        data,
        msg
      } = await doSubmit(params)
      if (code !== 200) {
        uni.showToast({
          icon: 'none',
          title: msg
        })
        return
      }
      getApp().globalData.examinationSuccess = {
        ...data,
        name: this.name,
        oldId: this.oldId
      }
      uni.redirectTo({
        url: '/pages/examination/paper?city=' + this.city + '&mock_exam_id=' + this.mockId
      })
    },
    showModal () {
      this.modalName = true
    },
    hideModal () {
      this.modalName = false
    }
  }
}
</script>

<style lang="scss" scoped>
.answer {
  height: 100vh;
  background-color: #F5F6F9;
  display: flex;
  flex-direction: column;

  .navs {
    width: 750rpx;
    box-sizing: border-box;
    padding: 29rpx 36rpx;

    image {
      width: 34rpx;
      height: 34rpx;
    }

    .nav-titles {
      image {
        position: relative;
        top: 5rpx;
      }
    }

    .nav-title {
      flex: 1;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #838A9D;
      margin: 0 20rpx 0 15rpx;

    }


    .nums {
      margin-left: 15rpx;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #838A9D;
      width: 702rpx;
      margin: 0 auto;
    }
  }
}

.card {
  flex: 1;

  .scroll-Y {
    height: 100%;
  }

  .btns {
    margin-top: 20rpx;
  }

  .btn {
    width: 702rpx;
    margin: 40rpx auto 0 20rpx;


    .nxt-btn {
      width: 100%;
      height: 92rpx;
      background: #E3E3E3;
      border-radius: 20rpx;
      height: 0;
      overflow: hidden;
      transition: height 0.25s;
      font-size: 34rpx;
    }

    .up-btn {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333;
      background-color: #FFFFFF;
      font-size: 34rpx;
    }

    .down-btn {
      background-color: #0683FF;
      color: #FFFFFF;
      font-size: 34rpx;
    }

    .submit-btn {
      background-color: #04BF75;
      color: #FFFFFF;
      font-size: 34rpx;
    }
  }
}

.dia-content {
  height: 180rpx;
}

.dia-bottom {
  border-top: 1rpx solid #f2f2f2;

  .jt-btn {
    flex: 1;
    padding: 25rpx 0;

    &:first-child {
      border-right: 1rpx solid #f2f2f2;
      color: #999;
    }

    &:last-child {
      color: #36c269;
    }
  }
}
</style>